<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>学生管理</title>
        <style type="text/css">
            .wrapper { border: 1px solid blue ; margin: 15px auto ; width: 80%; }
            .add { overflow: hidden ;   }
            .add>span { float: left ; margin-right: 25px ; height: 30px; line-height: 30px; box-shadow: 0 0 5px 4px yellow inset;}
            
            .list { border-color: transparent ; }
            table a {
                text-decoration: underline;
                color: blue ;
                cursor: pointer;
            }
        </style>
    </head>
    <body>

        <div class="wrapper add">
            <span>
                <input type="text" name="name" placeholder="学生姓名">
            </span>
            <span>
                性别
                <input type="radio" name="gender" value="male" >靓仔
                <input type="radio" name="gender" value="female" checked>靓妹
            </span>
            <span>
                出生日期
                <input type="date" name="birthdate" >
            </span>
            <span>
                <button type="button" class="btn-add">添加</button>
            </span>
        </div>

        <div class="wrapper list"></div>

        <script type="text/javascript">

            let id = 0 ;
            const students = [ ];
            let list = document.querySelector( '.list' );

            function check(){
                let genderRadios = document.querySelectorAll( '[name=gender]' );
                let arr = Array.from( genderRadios );
                let radio = arr.find( r => r.checked );
                return radio ;
            }

            function show(){
                let tab = '<table width="100%" border="1">' ;
                students.forEach( s => {
                    tab += `<tr>
                                <td>${s.id}</td>
                                <td>${s.name}</td>
                                <td>${s.gender}</td>
                                <td>${s.birthdate}</td>
                                <td> <a class="btn-remove" data-id="${s.id}">删除</a> </td>
                                <td> <a class="btn-edit" data-id="${s.id}">编辑</a> </td>
                            </tr>`;
                });
                tab += '</table>' ;
                list.innerHTML = tab ;
                bind();
            }

            function bind(){
                let btns = document.querySelectorAll( '.btn-remove' );
                let fn = function(e){
                    let t = e.target ;
                    console.dir( t );
                    console.log( t.dataset.id );
                    let index = students.findIndex( s => s.id == t.dataset.id );
                    students.splice( index , 1 );
                    show();
                }
                Array.from( btns ).forEach( a => {
                    on( a , 'click' , fn );
                });
            }

            function on( target , type , listener , capture = false ){
                target.addEventListener( type , listener , capture );
            }

            function add(){
                let nameInput = document.querySelector( '[name=name]' );
                let genderInput = check();
                let birthdateInput = document.querySelector( '[name=birthdate]' );
                let n = nameInput.value ;
                let g = genderInput.value ;
                let b = birthdateInput.value ;
                let stu = { id: ++id , name:n , gender:g , birthdate:b };
                students.push( stu ); // 添加学生信息到数组中
                show(); // 重新显示学生信息
                nameInput.value = '' ;
                birthdateInput.value = '' ;
            }

            let addBtn = document.querySelector( '.btn-add' );
            on( addBtn , 'click' , add );
        </script>
        
    </body>
</html>